<template>
  <div>
    <div class="relativeView">
      <m_banner :imgs=banners></m_banner>
    </div>


    <div v-for="[key,value] in Object.entries(planCategories)">
      <p class="tagLabel">{{ key }}</p>
      <home-plan-m-unfold :list='value'/>
    </div>

    <div style="height: 10px"></div>
    <evaluation-section :list="evaluationList"/>

    <div v-for="[key,value] in Object.entries(courseCategories)">
      <p class="tagLabel">{{ key }}</p>
      <home-course-m :courseList=value :subscription-id="buyInfo.subscriptionId"></home-course-m>
    </div>

<!--    <section>-->
<!--      <div style="margin-top: 20px"></div>-->
<!--      <van-sticky>-->
<!--        <m_sort :sortList=categoryList @sendDataPick='sortSwitch'/>-->
<!--      </van-sticky>-->
<!--      <home-course-m :courseList=courseList :subscription-id="buyInfo.subscriptionId"></home-course-m>-->
<!--    </section>-->


    <div style="height: 50px;"></div>
  </div>
</template>

<script>
import m_banner from '@/components/m_banner'
import m_sort from './components/HomeSort-m.vue'
import HomePlanMUnfold from './components/HomePlanMUnfold'
import HomeMixin from './HomeMixin'
import {Sticky} from 'vant'
import EvaluationSection from './components/EvaluationSection'
import HomeCourseM from './components/HomeCourse-m'

Vue.use(Sticky)

export default {
  components: {
    HomeCourseM,
    EvaluationSection,
    m_banner,
    m_sort,
    HomePlanMUnfold,
  },
  mixins: [HomeMixin],
  mounted () {
    // 挂载完成后，判断浏览器是否支持popstate--物理返回键
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false)
    }
  },
  //页面销毁时，取消监听。否则其他vue路由页面也会被监听--物理返回键
  destroyed () {
    window.removeEventListener('popstate', this.goBack, false)
  },
  created () {
    this.fetchData({bannerType: 702})
    /*this.fetchDataCustom();*/
  },
  methods: {
    // 如支持popstate,在点击手机返回键时会触发下面的方法
    goBack () {
      window.location.reload()
    },
  },

}
</script>

<style scoped>
.relativeView {
  position: relative;
  padding-bottom: 6%;
}

.tagLabel {
  margin-left: 16px;
  color: #323334;
  font-size: 20px;
  font-weight: bold;
  padding-top: 16px;
  padding-bottom: 12px;
}

.evaluationSection span:nth-child(1) {
  font-size: 16px;
  font-weight: bold;
}

.evaluationSection span:nth-child(2) {
  font-size: 14px;
  padding-left: 20px;
}

.evaluationContent p:nth-child(1) {
  margin-left: 8px;
  color: #323334;
  font-size: 16px;
  font-weight: bold;
  padding-top: 8px;
  padding-bottom: 4px;
}

.evaluationContent p:nth-child(2) {
  margin-left: 8px;
  font-size: 14px;
  color: #909092;
}
</style>
